<template>
  <div class='container'>
    <el-card>
      <!-- 顶部文字和按钮 -->
      <PagMessage>
        <template #left>
          <span>说明:目前支持学科和关键字条件筛选</span>
        </template>
        <template #right>
          <el-button type="success" size="small" @click="$router.push('/questions/new')">
            <i class="el-icon-edit" />
            <span>新增标题</span>
          </el-button>
        </template>
      </PagMessage>

      <!-- 中间表单 -->
      <FormMessage @clickSearch="clickSearch" />

      <!-- 底部表格 -->
      <el-alert type="info">
        <i class="el-icon-info" />
        <span>数据一共有{{counts}}条</span>
      </el-alert>
      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          prop="number"
          label="试题编号"
          width="100px"
        />
        <el-table-column
          prop="subject"
          label="学科"
        />
        <el-table-column
          prop="catalog"
          label="目录"
        />
        <el-table-column
          prop="questionType"
          label="题型"
          :formatter="formatterFn"
        />
        <el-table-column
          width="300px"
          prop="question"
          :formatter="questionFn"
          label="题干"
        />
        <el-table-column
          width="200px"
          label="录入时间"
        >
          <template #default="{row}">
            {{row.addDate|parseTimeByString}}
          </template>
        </el-table-column>
        <el-table-column
          prop="difficulty"
          label="难度"
          :formatter="formatterDifficulty"
        />
        <el-table-column
          prop="creator"
          label="录入人"
        />
        <el-table-column label="操作" width="180px">
          <template #default="{row}">
            <!-- 预览 -->
            <el-tooltip
              effect="light" content="预览" :visible-arrow="show" placement="bottom"
            >
              <el-button
                plain size="small"
                type="primary"
                icon="el-icon-view"
                circle
                @click="editPreview(row.id)"
              />
            </el-tooltip>
            <!-- 修改 -->
            <el-tooltip
              effect="light" content="修改" :visible-arrow="show" placement="bottom"
            >
              <el-button
                plain
                size="small"
                type="success"
                icon="el-icon-edit" circle
                @click="$router.push('/questions/new')"
              />
            </el-tooltip>

            <!-- 删除 -->
            <el-tooltip
              effect="light" content="删除" :visible-arrow="show" placement="bottom"
            >
              <el-button
                plain size="small"
                type="danger"
                icon="el-icon-delete" circle
                @click="deleteFn(row.id)"
              />
            </el-tooltip>

            <!-- 加入精选 -->
            <el-tooltip
              effect="light" content="加入精选" :visible-arrow="show" placement="bottom"
            >
              <el-button
                plain
                size="small"
                type="warning" i
                icon="el-icon-check" circle
                @click="addCheck(row.id)"
              />
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <QuestionsPreview
        :isShow.sync="isShow"
        :tableData="tableData"
        :itemList="itemList"
        :showQuestion="showQuestion"
      />
      <!-- 分页器 -->
      <el-pagination
        style="float:right; margin:20px,0"
        background
        :current-page="pageinfo.page"
        :page-size="pageinfo.pagesize"
        :page-sizes="[5,10,20,50]"
        layout=" prev, pager, next,sizes, jumper"
        :total="counts"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>

<script>

import { list, remove, detail, choiceAdd } from '@/api/hmmm/questions.js'
import QuestionsPreview from '../components/questions-preview.vue'

export default {
  components: { QuestionsPreview },
  data () {
    return {
      tableData: [], // 表格
      pageinfo: {
        page: 1, // 页数
        pagesize: 5 // 每页条数
      },
      // show: false,
      counts: 0, // 当前共多少页
      show: false, // 按钮hover时的箭头
      isShow: false, // 弹框显示
      itemList: {}, // 回显单项数据
      showQuestion: '', // 类型
      zhf: true,
      id: 0
    }
  },
  created () {
    this.GetcreateTable()
  },
  methods: {
    // 获取表格列表
    async  GetcreateTable () {
      const { data: { items, counts } } = await list(this.pageinfo)
      // console.log(res)
      this.tableData = items
      this.counts = counts
    },
    // 题型
    formatterFn (row, column, cellValue, index) {
      // formatter看看类型
      // console.log(row, column, cellValue, index)
      if (cellValue === '1') {
        return '单选'
      } else if (cellValue === '2') {
        return '多选'
      } else {
        return '简答'
      }
    },
    // 题干
    questionFn (row, column, cellValue, index) {
      const obj = cellValue.replace(/<[^>]+>/g, '')
      return obj
    },
    // 难度
    formatterDifficulty (row, column, cellValue, index) {
      if (cellValue === '1') {
        return '简单'
      } else if (cellValue === '2') {
        return '一般'
      } else {
        return '困难'
      }
    },
    // 分页器
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.pageinfo.pagesize = val
      // 重置
      this.page = 1
      if (this.zhf) {
        this.GetcreateTable()
      } else {
        this.clickSearch({
          subjectID: this.id
        })
      }
    },
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.pageinfo.page = val
      if (this.zhf) {
        this.GetcreateTable()
      } else {
        this.clickSearch({
          subjectID: this.id
        })
      }
    },
    // 预览
    async editPreview (id) {
      this.isShow = true
      // this.previeId = id
      const { data } = await detail({ id })
      // console.log(res)
      this.itemList = data
      // 单选
      this.showQuestion = data.questionType
    },
    // 删除
    deleteFn (id) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示').then(async () => {
        await remove(id)
        // console.log(res)
        this.$message.success('删除成功')
        this.GetcreateTable()
      }).catch(() => {
        console.log('取消')
      })
    },
    // 加入精选
    addCheck (id) {
      this.$confirm('此操作将题目加入精选,是否继续?', '提示').then(async () => {
        const res = await choiceAdd({
          id,
          choiceState: 1
        })
        console.log(res)
      }).catch(() => {
        console.log('取消')
      })
    },
    // 搜素
    async clickSearch (form) {
      this.id = form.subjectID
      this.zhf = false
      const { data } = await list({
        subjectID: form.subjectID,
        page: this.pageinfo.page, // 页数
        pagesize: this.pageinfo.pagesize // 每页条数
      })
      console.log(data)
      this.tableData = data.items
      this.counts = data.counts
    }
  }

}
</script>

<style scoped lang='scss'>

  </style>
